<!--
 * @name: 
 * @Author: 刘大可
 * @Date: 2023-06-25 16:13:02
 * @LastEditors: 刘大可
 * @LastEditTime: 2023-09-08 11:35:28
-->
<template>
	<view class="index">
		<cu-custom bgColor="bgmain" :isBack="true">
			<view slot="content">积分兑换</view>
		</cu-custom>

			<view class="yueBox BgCM">
				<view>
					<view class="key">我的积分</view>
					<view class="val">{{ integral }}</view>
				</view>
				<!-- <view class="btn">充值</view> -->
				<view class="decs" @click="showModal">积分规则</view>
			</view>
			<view class="chongs row" v-if="1==1">
				<view class="chong" :class="flg == 0 ? 'cur' : ''" @click="flg = 0">积分兑换</view>
				<view class="chong" :class="flg == 1 ? 'cur' : ''" @click="flg = 1">积分记录</view>
			</view>
			<block v-if="flg == 0">
				<view class="topList row">
					<block v-for="(item, index) in topList" :key="index">
						<view class="topItem col" :class="itemS.r_id == item.r_id ? 'borderS' : ''" @click="change(item)">
							充{{ item.price }} 赠{{ item.give_price }}
							<!-- <view class="row">
							<view class="chong">充{{ item.price }}</view>
						</view>
						<view class="zeng">赠{{ item.give_price}}</view> -->
						</view>
					</block>
				</view>
				<view class="box">
					<view class="numss">
						剩余聊天次数：{{ user.gpt_exchange||0 }}
					</view>
					<uni-easyinput type="number" v-model="nums" :primaryColor="style.color" focus placeholder="请输入兑换多少积分" ></uni-easyinput>
					<block v-if="nums > 0">
						<view class="pay row" v-if="nums*1 > integral*1">积分不足</view>
						<view class="pay row" @click="plance" v-else>
								使用{{ nums  }}积分兑{{ 　　Math.floor(nums /sys.gpt_exchange )}}次聊天</view>
					</block>
					<view class="pay row" v-else>积分兑换</view>
				</view>

			</block>

			<block v-if="flg == 1">

				<!-- <view class="types row">
					<view class="type row" :class="type == 1 ? 'cur' : ''" @click="tagetType(1)">充值记录</view>
					<view class="type row" :class="type == 2 ? 'cur' : ''" @click="tagetType(2)">消费记录</view>
				</view> -->
				<view class="list">
					<block v-for="(item, index) in list" :key="index">
						<view class="item row">
							<view>
								<view class="title">
									{{ item.remarks }}
								</view>
								<view class="time">
									{{ item.addtime }}
								</view>
							</view>
							<view class="price" v-if="item.total_integral">
								<!-- {{ item.state==1?"+":item.state==2?"-":"" }} -->
								{{ item.integral }}积分
							</view>
						</view>
					</block>

				</view>
			</block>


		<view class="cu-modal bottom-modal" :class="modalName ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog padding" @tap.stop="" >
				<!-- <rich-text :nodes="sys.integral_illustrate"></rich-text> -->
				<mp-html :content="integral_illustrate"></mp-html>

			</view>
			
		</view>



	</view>
</template>

<script>
import input from "../components/uni-easyinput/uni-easyinput"
import Vue from 'vue';
export default Vue.extend({
	components: {
		"uni-easyinput":input
	},
	data() {
		return {
			user: {},
			integral:0,
			flg:0,
			type:1,
			list:[],
			sys:{},
			nums:"",
			style: {
				color: "#ff6344"
			},
			page:1,
			modalName:false,
			integral_illustrate:''
		}
	},
	computed: {},
	methods: {
		hideModal(){
			this.modalName=false
		},
		showModal() {
			this.modalName =true

		},
		plance() {
			this.request("Chat/exchange", {
				// num:this.nums，
				integral:this.nums
			}).then(res => {
				console.log(res);
				if (res.data.status==200) {
					this.init()
					this.tips.success(res.data.msg)
					this.nums=""
				}


			})
		},
		init() {
			this.request("WechatUser/view", {}).then(res => {
				this.user = res.data.data
				this.integral = res.data.data.integral
			})
			this.request("Setting/view", {}).then(res => {
				this.sys = res.data.data.sys
				this.integral_illustrate = this.escape2Html(res.data.data.sys.integral_illustrate);
			})
			this.page = 1
			this.list = []
			this.getList()
		},
		getList(){
			this.request("Integrallog/list", {
				page:this.page
			}).then(res => {
				console.log(res.data.data);
				this.list = this.page==1? res.data.data.data:[
					...this.list,
					...res.data.data.data
				]
			})
		}
	},
	watch: {},

	// 页面周期函数--监听页面加载
	onLoad() {
		this.init()
	},
	// 页面周期函数--监听页面初次渲染完成
	onReady() { },
	// 页面周期函数--监听页面显示(not-nvue)
	onShow() { },
	// 页面周期函数--监听页面隐藏
	onHide() { },
	// 页面周期函数--监听页面卸载
	onUnload() { },
	// 页面处理函数--监听用户下拉动作
	// onPullDownRefresh() { uni.stopPullDownRefresh(); },
	// 页面处理函数--监听用户上拉触底
	onReachBottom() {
		this.page+=1
		this.getList()
	},
	// 页面处理函数--监听页面滚动(not-nvue)
	// onPageScroll(event) {},
	// 页面处理函数--用户点击右上角分享
	// onShareAppMessage(options) {},
}) 
</script>

<style scoped lang="scss">	
@import "./main.scss";

</style>